<!DOCTYPE html>
<html lang="en">
<head>
    <!--网页关键字,多个关键字用逗号隔开-->
    <meta name="keyword" content="html入门，css入门，JavaScript入门"/>
    <!--网页描述-->
    <meta name="description" content="html从小白到大牛"/>
    <!--作者-->
    <meta name="author" content="yuyuan"/>
    <!--版权信息-->
    <meta name="copyright" content="版权所有，侵权必究"/>
    <!--定义页面使用的语言-->
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <!--页面刷新-->
    <meta http-equiv="refresh" content="5;url=#"/>
    <title>Title</title>
    <script type="text/javascript">

    </script>
    <link href="1.html" rel="stylesheet">
</head>
<body>
前端基础知识：
    html是网页的结构
    css是网页的外观
    JavaScript是网页的行为
    静态网页：缺乏与用户的交互
    前端：html（hyper text markup language），css，JavaScript，html5，css3，ajax（asynchronous异步 JavaScript and xml，seo（search engine optimization）
动态网页技术：php，jsp，asp.net
    学习路线：HTML→CSS→JavaScript→jQuery→CSS3→HTML5→ASP.NET（或PHP）→AJAX
<h1>文章标题(只有一个)</h1>
<h2>大标题</h2>
<h6>标题</h6>
<p>段落</p>
<br/>换行
    记住标签的语义就是理解该标签的释义
粗体尽量使用<strong></strong>而非<b></b>:标签的语义性
斜体尽量使用<em></em>,而非<cite></cite>和<i></i>
上标：sup，下标：sub
大号字体：big ，小号字体：small，两者均很少使用，可用css代替，但为了网页语义化，small可用于网页底部的版权声明
删除标签：s，用css代替，删除线效果采用text-decoration：line-through实现
下划线标签：u，用css代替
水平线标签：hr（horizon）
div标签：为文档内大块内容提供结构和css样式控制，division，用来划分一个区域
可输入的特殊符号：双引号&quot;左单引号&lsquo;右单引号&rsquo;乘号&times;除号&divide;
                小于号&lt;大于号&gt;与&amp;长破折号&mdash;竖线&#124;空格&nbsp;
自闭合标签：没有结束符，只能定义自身的一些属性
meta,link,base,br,hr,input,img，embed。
html元素分为块元素block和行内元素inline
常见块元素：div，h1~6，p，hr，ol，ul（独占一行，排斥其他元素与其位于同一行）
常见行内元素：strong，em，span，img，input（可与其他元素位于同一行，内部不能容纳块元素）
列表：在列表元素中只能含有列表元素，不能有其他的非列表元素，列表可以嵌套列表
有序列表ol（ordered list）：li（list item）文本只能放在li元素内部
ol的type属性值：1，a，A，i，I。 # type属性在css中用list-style-type实现
无序列表ul（unordered list）：
ul的type属性值：disc实心圆，circle空心圆，square实心正方形，  # type属性同样由list-style-type实现
无序列表：凡是需要展示型信息的地方都用到了无序列表，比如百度首页，网页导航
定义列表（definition list）：dt（definition term）：dd（definition description）
形式：<dl>名词定义<dt>名词解释</dt><dd></dd>...<dt></dt><dd></dd></dl>
dd标签只能在dl中使用，dd标签会缩进文本
表格基本结构：table，caption（标题），thead，tr，th，tbody，tr，td，tfoot，tr，td
tr：table row；td：table data cell。th（文本会加粗）：table header；
默认情况下，表格无边框
thead，tbody，tfoot作用使得代码更有语义化、方便控制表格的css样式
td的属性：合并行rowspan，合并列colspan，属性值为数字
图像标签img（image）：
    必要属性：src（source源文件），alt（设置图片描述信息，给搜索引擎看的），title（鼠标移至图片时给用户的提示文字）
    相对路径（同一目录下直接引用）、绝对路径
图片或文件建议使用英文名
位（bit)图（点阵图）：由像素组成，分为8位，16位，32位，
    位指的是颜色的种类，比如8位图有2的8次方种颜色
    位图一般选用24位，32位图体积更大，使得浏览器页面加载速度变慢（肉眼难以分辨24和32位图）
    位图放大缩小均会使得图片失真（像素变化）
    位图格式：jpg（适用于色调复杂绚丽的图片），png（适用简单的图片，网页专用格式），gif（表达动画效果）
矢量图（向量图）：图像不会失真，但难以表达色彩丰富的图像效果），后缀一般有ai，cdf，fh，swf（flash）
超链接a：外部链接，内部链接（链接到同一个网站），
    电子邮件链接，锚点链接（适用于页面过于长的页面，跳到当前页面的某一部分），空链接，脚本链接。
属性href（Hypertext Reference）：表示链接至的地址
属性target(目标窗口的打开方式）的值：_self（当前），_blank（新窗口），_top（顶层框架），_parent（上一层）

表单标签结构：form，input，textarea，（select，option）
表单元素的换行应该使用p元素括起来自动换行（p元素为块元素）
form属性（后端技术）：name（便于区分各种表单），action（指定表单数据的处理地址），
    method（表单数据的http提交方法值为get，post等），target（同a标签），
    enctype（表单信息提交的编码方式，有默认值和multipart/form-data（mime编码，有上传文件必须选择此属性））
input标签：
type属性：text（配套的属性value默认值，size框的长度，maxlength字符输入最大长度），
        password（配套属性同text），radio（单选框，配套属性有name（同一组必须相同），value，checked），
        checkbox（复选框，配套属性有id（同一组中id值要相同），value，checkout，其中要配合label标签使用，label标签的for属性指向其id值）
        button（普通按钮，配套属性有value（按钮上的值），onclick（按钮点击事件）），
        submit（提交按钮，配套属性有value（按钮值）），reset（重置按钮，配套属性有value（按钮值），只能清除同一表单的值）。
        image（图片域，有按钮和图片的特点，配套属性有src，在开发中，能用css实现的就不用图片实现），hidden（隐藏域，向后端传送不想让用户看到的数据，实际开发中不要用它传递敏感重要的信息）
        file（文件上传，必须说明编码方式）
textarea标签：配套属性有rows，cols等。
select（下拉列表，配合option使用）：
select属性：multiple（设置可选择的项数，默认为1，用CTRL+鼠标左键选择），size（列表展开后的可见列表项数）
input标签按钮与button标签按钮区别：button标签按钮实现功能更强大，但不能提交数据到服务器，然而真正开发按钮都是用div标签结合css实现的）
表单元素不一定要放在form标签内，但与服务器进行交互则必须要放在该标签内）

embed标签（已被object标签替代，
    大多数现代浏览器已经弃用并取消了对浏览器插件的支持，
    所以如果您希望您的网站可以在普通用户的浏览器上运行，
    那么依靠 <embed> 通常是不明智的。（
    支持大部分主流多媒体文件格式，属性有src，width，height，
    hidden（false（默认），true（隐藏面板），ie中为空或为true时隐藏），Firefox不支持，chrome中为true隐藏，
    autostart（true，false），loop（true，false，-1等，循环效果无效，只能手动点击添加）
bgsound标签（背景音乐标签，只适用于ie）
iframe标签：页面子框架，属性有：src，width，height，scrolling（auto，yes，no滚动条）


html进阶4.01：
xhtml：extensible hyper markup language
xhtml的特点：标签需闭合，标签及属性需要小写，属性必须用引号，用id代替name
html5的特点：文档类型说明被简化，标签不区分大小写，属性可不用引号，部分属性的属性值可省略。
div常用于页面中较大块的结构划分，配合css使用，只有当其他行内元素都不适合时，才用span配合css操作（纯粹是应用样式）
label标签只适用于表单中，显示在输入控件旁边的说明性文字。
id属性：对于页面中关键的结构（logo。导航。主体内容。底部信息栏）或大结构使用id，一些小地方建议使用class属性。
浏览器标题栏小图标添加：<link rel="shortcut icon" type="image/x-icon" href="#.ico"/>
语义结构良好的页面优势：利于开发调试和后期维护，利于搜索引擎优化。
html语义化的方面：
标题语义化：一个页面只能有一个h1标签，h1~h6不能断层，中间不能缺，要按顺序使用，可结尾少，但不能说用了h3没用h2，h1~6标签只能用于标题，不能用div代替它
图片语义化：alt属性必不可少，title属性建议加，给图片加上图注使用figure和figcaption元素来增强图片的语义化
            <figure><img src="" alt="" title=""/><figcaption>图注</figcaption> </figure>
表格语义化：使表格结构更加清晰
表单语义化：
每一个表单行内元素要用p标签括起来实现换行
label标签的for属性关联表单元素的id，作用绑定了label与表单元素，增强了鼠标的可用性，当点击了label中的文本时，表单元素也会获得焦点。
表单组标题：fieldset（给表单分组）和legend标签（表单组标题）:作用增强表单语义化，定义fieldset的disabled属性禁用整个组的表单元素（不能操作）。
<fieldset><legend>组标题</legend>...表单元素...</fieldset>
其他语义化：
换行标签只能用于p标签内部
无序列表：
strong和em：如果仅是为了实现加粗和斜体，应用css实现，这两个标签是起强调的作用，在seo中占据一定比重。
del和ins：定义删除/更新的文本（价格变动），seo，使用css删除他们原有样式而重新定义）
img标签：当图片作为html的一部分并且想被seo识别，应该使用img，若起修饰则用css背景图片。
语义化验证：简单方法去掉css页面仍然有良好可读性。。
果断舍弃为了定义样式的标签
html5舍弃的标签：仅为了定义样式，或被新标签替代或很少使用。
---------------------------------------------------------------
HTML5 舍弃的标签列表，HTML 4.01中支持,在HTML5中不再支持的HTML标签列表。
标签	描述
<acronym>	定义首字母缩写。
<applet>	定义 applet。
<basefont>	请使用 CSS 代替。
<big>	定义大号文本。
<center>	定义居中的文本。
<dir>	定义目录列表。
<frame>	定义子窗口（框架）。
<frameset>	定义框架的集。
<isindex>	定义单行的输入域。
<noframes>	定义 noframe 部分。
<noscript>	定义 noscript 部分。
<s>	定义加删除线的文本。
<small>	定义小号文本。
<strike>	定义加删除线的文本。
<tt>	定义打字机文本。
<u>	定义下划线文本。
<xmp>	定义预格式文本。
--------------------------------------------------

CSS（cascading style sheet2.0）基础：
css引用方式：（先加载css再加载html）
    外部样式表（<link href="#" rel="stylesheet" type="text/css"/>
    内部样式表（<style type="text/css"></style>）
    内联样式表（eg:<p style="background: black"></p>）
    import导入样式（先加载html再加载css）
id属性与class属性
css选择器：
    元素（元素名），id（#id名），class（.class名），
    群组选择器（第一个元素,第二个元素,...）
    后代选择器：M N{}(同子元素)：选中m元素内部所有的n元素。
    子代选择器：M>N{}：选中m元素的第一级子元素。
    兄弟选择器：M~N{}：选中m后面所有的n类兄弟元素。
    相邻选择器：M+N{}：选中m后面的一个n元素。

字体样式：
font-family：可多个字体用逗号隔开
font-size（字体的高宽）：一般采使用像素为单位，关键字值由small，medium，large配合x-使用。
color：文本颜色（前景色），采用十六进制（#abcdef）或颜色关键字表示
font-weight：一般使用关键字（lighter（较细），normal400，bold700，bolder），不建议使用数值（100~900）
font-style：斜体，normal正常，italic斜体
css注释：/*...*/
css文本属性：
text-decoration：none（默认值，去掉上中下划线，例如超链接），underline（下划线用于文章重点说明），
                line-through（中划线，价格促销），overline（顶划线）
text-transform：none，uppercase（转换为大写），lowercase（转换为小写），capitalize（单词首字母大写）
font-variant：极少使用，把文本设置成小型大写字母，normal，small-caps
text-indent：首行缩进，通常为font-size值的两倍（缩进2个字符）
text-align：文本水平对齐方式，left，center，right
line-height：像素值;
    line-height：两行基线之间的垂直距离。
    行距指的是上一行底线到下一行顶线的垂直距离，即两行文字之间的空隙
    一行文字的高度由line-height决定，而height决定整个块的高度。
    利用line-height=height实现单行文字的垂直对齐。
    line-height是可继承的，但是自身设置的值比继承的优先级更高。
    当line-height取值为%或em时的值计算：
        line-height = 父元素font-size 乘以（自定义或继承父元素line-height的%或em的值。
                <!---->
    <!---->line-height的值？？？？？？
    实验结论：若本身没有设置line-height，则算法如上，
    若本身设置了line-height，则是自身元素的font-size乘以line-height。
    当line-height的取值为一个数字时，line-height=自身元素的font-size乘以line-height的系数。
    <!---->
letter-spacing：字间距，很少使用
word-spacing：词间距
边框样式：合并写法（border:width style color;）
border-width：0表示边框宽度为0，但实际上还存在
border-style：边框的线条形式，none（无样式），solid实线，dashed（断实线），dotted（点线），double（双线条），
            inset（内凹，左上内部明显），outset（外凸，右下外部明显），
            ridge（脊线，左上内与右下外），groove（槽线，左上外与右下内）
border-color：
局部边框样式（border-配合top，left，bottom，right使用）
背景颜色：background-color
背景图像：
background-image：需要url属性，形式如url("地址")。
background-repeat：背景图像的平铺方式，横纵都平铺（repeat，默认值），不平铺（no-repeat）
                    ，横向平铺（repeat-x），纵向平铺（repeat-y），
background-position：背景图距离该元素的位置，只能应用于块元素和替换元素（img，input，textarea，object）
                    取值形式:距离左上角的水平垂直位置（xpx,ypx）;
                    关键字：也分水平垂直位置，（top left),(top center),(top right),
                                            (left center),(center center),(right center),
                                            (bottom left),(bottom center),(bottom roght)。
background-attachment：背景固定样式，scroll（背景随对象一起滚动），fixed（背景不随内容滚动）
超链接样式：
去除超链接下划线：使用text-decoration:none;来实现
超链接伪类：必须要按照下列的顺序进行，不然无法正常显示某些样式
a:link(未访问时的样式)，
a:visited(访问后的样式)，
a:hover(鼠标经过时的样式)，
a：actived(鼠标单击瞬间的样式)
一般情况下只用到未访问状态（默认，不必要使用a:link）和鼠标经过时的状态(:hover)。
伪类:hover可以用于任意的元素
定义鼠标形状样式：一般情况下只用到default和pointer属性值
用法：cursor：属性值；
属性值有：default，pointer，text，crosshair，wait，help，move等
自定义鼠标样式：cursor:url("地址"),属性值;其中属性值同上。
图片样式：
width,height：在实际开发中，图片的实际尺寸应该跟网页中使用的尺寸相同或相似，避免数据传输过大，影响页面的加载速度
border:width，style，color;

text-align（水平对齐方式，在父元素定义，里面的元素居中）：只对文本和inline元素，inline-block有效，对块元素不起作用：属性值有left，right，center，justify（两端对齐，较少用）
    用于首行缩进，在h1标签中，隐藏文字（仍然能够占据seo权重）利用背景图片设置logo。
    text-align：-9999px；
    margin:0 auto;：实现块元素的水平居中对齐方式，在当前元素定义，然后该元素相对于父元素水平居中

vertical-align：垂直对齐，值有top，middle，baseline，bottom，
    用于定义周围的文字，inline元素，以及inline-block元素相对于该元素基线的垂直对齐方式
    vertical-align属性对table-cell类型（针对自身元素有效，定义的是子元素相对于自身的对齐方式），对块元素类型无效。
    vertical-align属性允许指定负值（相对于基线向下偏移）和百分比%（相对于当前元素line-height的值设置）。
    （在div中实现图片垂直居中）



文字环绕效果：float：值有left，right，none（默认）
定义图片与文字的间距：使用margin-加上top，bottom，left，right
列表项符号样式：list-style-type
有序列表的值有：decimal（默认，数字），lower-roman，upper-roman，lower-alpha，upper-alpha。
无序列表的值有：disc，circle，square
去除列表项符号的值：none
自定义列表项符号：list-style-image:url("地址");
表格边框：
border-collapse：边框合并，值有separate（边框分开，默认），collapse（边框合并）（表格独有的属性）
边框间距：border-spacing：横向间距 纵向间距;
表格标题位置：caption-side：值有top，bottom；
css盒子模型：每个元素都是一个盒子，
只有块元素才能设置width和height，行内元素不能设置。
盒子模型由content，padding（补白，内容与边框之间的距离），border，margin（元素与元素之间的距离）四个属性组成。
padding或margin的写法：
padding：20px；
padding：20px 40px；上下，左右
padding：20px 40px 60px；上，右左，下
border：0与border：none的区别：
    border：0虽然看不见，但是浏览器还是会对border进行渲染，只是像素为0，需占用内存。
    border：none浏览器不渲染，不占内存。
外边距叠加（只有垂直外边距,只针对类块元素）的情况：，叠加之后的外边距高度等于发生叠加之前的两个外边距中的最大值。
    同级元素，父子元素（未设置内边距和边框的情况下),
负margin技术：
    针对普通文档流元素：当margin任一方向值为负时，拉向左上角（向左或向上拉）
    针对浮动元素：即拉向其浮动的方向。左上或右上
负margin技巧：图片与文字对齐，自适应两列布局，元素垂直居中，tab选项卡
去除元素默认的边框：{padding:0;margin:0;}。
    去除默认的列表项样式：{list-style-type:none;}。
浮动布局：
正常文档流：即将窗体自上而下分成一行一行，块元素独占一行，相邻行内元素在每行中按从左到右一次排列
脱离文档流：即元素显示的位置与文档代码中描述的不一致。使用浮动或定位来实现脱离正常文档流。
浮动属性float：任何元素均能设置float属性，浮动元素会生成一个块级框，而不论其本身是何种元素。
设置了浮动属性的盒子会使得盒子及其中的内容一起浮动，值有left，right，（none，inherit很少用）
清除浮动clear：属性值有left，right，both：清除浮动后前面元素产生的浮动对该元素不会产生影响。
清除浮动还可使用overflow:hidden;来实现。

overflow属性：定义当内容溢出元素边框时发生的事情
    overflow取值：visible（默认，内容溢出可见），hidden（内容溢出隐藏），scroll（内容溢出显示滚动条），auto（自动调整）
    用途：显示滚动条，隐藏内容，清除浮动（当子元素设置为浮动时，父元素高度塌陷，适用于父元素未设置高度时）。


布局定位：position
布局定位的四种方式（属性值）：固定定位fixed，相对定位relative，绝对定位absolute，静态定位static（默认）。
固定定位是以浏览器窗口为参照对象的，不会随着滚动条的拖动而改变位置，配套的属性有top，bottom，left，right
四者的属性值均为像素，四个值参考的是浏览器窗口的四条边，四个值（只需其中两个值就能确定位置）不一定都要用到。
相对定位是相对该元素原始位置而来的，配套属性有top，bottom，left，right，
相对定位的容器浮上来后，它的原始位置保持为空，后面的元素不会挤上来
绝对定位使用最广泛，当元素变为绝对定位元素后，这个元素就完全脱离正常文档流，其前后的元素会认为此元素不存在，浮于其他元素上面独立
配套属性有：top，bottom，left，right。
静态定位：使其他定位方式恢复为默认的定位方式。

标签的语义：
div：division，分割块元素；span：区域（行内元素）；p：paragraph，段落；
ol：ordered list，有序列表；ul：unordered list，无序列表；li：list item，列表项；
dl;definition list,定义列表；dt：definition term，定义术语；dd：definition description，定义描述；
h1~h6：header，标题；hr：horizontal rule，水平线；a：anchor，锚点，超链接；
strong：强调（粗体）；em：emphasized，强调（斜体）；sup：superscripted，上标；
sub：subscripted，下标；br：break，换行；fieldset：域集；legend：图例；
caption：表格图像标题




css进阶（2.1）：
    css单位：绝对单位（极少使用），相对单位（px，%，em，rem）：推荐使用px作为单位
    支持%号的元素：
    width，height，font-size的%相对于父元素的相同属性值计算。
    line-height的%相对于父元素的font-size计算。
    vertical-align的%相对于当前元素的line-height值计算。
    em相对于当前元素的font-size值，1em等于当前元素font-size的像素值。首行缩进text-align：2em；
    使用em作为统一单位时，拿浏览器默认字体（16px）换算
    1em=16px；设置body{font-size=62.5%;}--->10px；此时1em=10px；（实际开发中若使用统一单位很有效）
    rem相对于根元素的font-size值。
css中具有继承性的属性：
    文本相关属性：font-类，line-height，text-align，text-indent，word-spacing。
    列表相关属性：list-style-image，list-style-position，list-style-type，list-style。
    颜色：color。

 css优先级：
    相同权重优先级后来者居上（权重值的计算只针对当前元素）。
    优先级比较：
    行内样式>内部样式=外部样式。
    继承的最近祖先元素>其他较远祖先元素
    行内样式>id选择器>class选择器>元素选择器。
    !important样式优先级最高：eg：#name{color:red !important;}。

公有样式放在外部文件中，个别样式放在内部样式中，修改幅度较小且次数较低用内联样式。（否则影响加载速度）
 实际开发中三种引入样式配合使用，

css规范：
    文件命名规范
    id、class命名：驼峰（topMain）、中划线（top-main）、下划线（top_main）。
    使用英文命名，尽量不缩写（除非已成规定），命名统一一种形式
    class命名取父元素的class名为前缀。
    --------------------------------------------------
   网页主体命名【参考，即说明命名应该具有语义和可读性】：
    最外层：wrapper
    头部：header
    内容：content
    侧栏：sidebar
    栏目：column
    热点：hot
    新闻：news
    下载：download
    标志：logo
    导航条：nav
    主导航：main-nav
    子导航：sub-nav
    边导航：side-nav
    左导航：leftside-nav
    右导航：rightside-nav
    顶导航：top-nav
    主体：main
    左侧：main-left
    右侧：main-right
    底部：footer
    菜单：menu
    子菜单：submenu
    友情链接：friendlink
    加入我们：joinus
    版权：copyright
    服务：service
    登录：login
    注册：register
    标题：title
    摘要：summary
    登录条：loginbar
    搜索：search
    标签页：tab
    广告：banner
    小技巧：tips
    图标：icon
    法律声明：siteinfolegal
    网站地图：sitemap
    工具条：tool
    首页：homepage
    子页：subpage
    帮助：help
    指南：guild
    滚动：scroll
    提示信息：msg
    投票：vote
css书写：书写顺序
    功能代码集中放在一块，不遵循这个规则。
    影响文档流属性（布局属性）：display，position，float，clear等
    自身盒子模型：width，height，padding，margin，border，overflow等
    文本型属性：font-，line-height，text-align，text-indent，vertical-align等
    装饰属性：color，background，opacity，cursor
    其他属性：。。。
css注释：
    顶部注释：
    /*
    *@description:说明
    *@author:作者
    *@update:更新时间，如2016-4-19 18:30
    */
    模块注释：
    /*某部分，开始*/
    ……
    /*某部分，结束*/
    简单注释：关键代码（单行，多行注释）
    避免压缩工具删除注释：使用/*!注释内容*/
css reset：重置样式：去除元素在浏览器的默认样式，不同浏览器样式不同。
CSS reset代码必须在其他CSS之前引入,应该根据个人需求不同来定义(可有可无）
块元素的特点：独占一行，可定义width，height，margin。
行内元素特点：无法设置width，height，margin-top，margin-bottom。
inline-block元素特点：可以定义width，height，可以与其他行内元素位于同一行，常见的inline-block元素有：input和img。
 inline-block元素有默认的外边距：在其父元素设置font-size=0可以消除外边距，或者使用负margin技术，letter-spacing，word-spacing实现。
display:none;隐藏元素，被隐藏的元素不占据原来的位置，会被seo忽略。
    visibility:hidden;元素被隐藏依然占据原来的位置，可根据属性的语义来区分含义。
table-cell：让元素以表格单元格的形式呈现，
    实现的功能有（配合其他属性使用）：图片垂直居中：vertical-align
    等高布局（同一行单元格高度是相等的），，自动划分元素在一行显示（结合列表，导航栏）。

    改变元素类型：display：属性值;
    其中属性值有：inline，block，inline-block，table，table-row，table-cell，none（隐藏元素）




</body>
</html>